<template>
  <div class="data-analysis flex-col">
    <div class="timer">
      <el-date-picker
        v-model="month"
        type="month"
        size="small"
        placeholder="请选择月份"
        format="YYYY年MM月"
        value-format="YYYY-MM"
      />
    </div>
    <div class="data-analysis-content">
      <!-- 月度计划完成情况 -->
      <div class="dashcomponent data-analysis-item">
        <div class="dashcomponent-title">
          <span class="dashcomponent-title-prefixIcon">
            <i class="iconfont icon-jihuabiao"></i>
          </span>
          <span class="dashcomponent-title-caption">月度计划完成情况 </span>
        </div>
        <div class="dashcomponent-body flex-col">
          <div class="dashcomponent-body-left dashcomponent-body">
            <div class="kpi-base analysis-info">
              <span class="kpi-space"></span>
              <div>
                <span class="kpi-value">107.81</span>
                <span class="kpi-space"></span>
                <span class="kpi-title">万元</span>
              </div>
              <span class="kpi-space"></span>
              <span class="kpi-title">计划销售额</span>
              <span class="kpi-space"></span>
            </div>
            <div class="kpi-base analysis-info">
              <span class="kpi-space"></span>
              <div>
                <span class="kpi-value kpi-cursor" @click="handleMonthType(0)">
                  88.55
                </span>
                <span class="kpi-space"></span>
                <span class="kpi-title">万元</span>
              </div>
              <span class="kpi-space"></span>
              <span class="kpi-title">实际销售额</span>
              <span class="kpi-space"></span>
            </div>
            <div class="kpi-base analysis-process">
              <div class="bar" style="--precent: 93"></div>
            </div>
            <div class="kpi-base analysis-info">
              <span class="kpi-space"></span>
              <div>
                <span class="kpi-value">6,079</span>
                <span class="kpi-space"></span>
                <span class="kpi-title">件</span>
              </div>
              <span class="kpi-space"></span>
              <span class="kpi-title">计划销量</span>
              <span class="kpi-space"></span>
            </div>
            <div class="kpi-base analysis-info">
              <span class="kpi-space"></span>
              <div>
                <span class="kpi-value kpi-cursor" @click="handleMonthType(1)">
                  5,845
                </span>
                <span class="kpi-space"></span>
                <span class="kpi-title">件</span>
              </div>
              <span class="kpi-space"></span>
              <span class="kpi-title">实际销量</span>
              <span class="kpi-space"></span>
            </div>
            <div class="kpi-base analysis-process">
              <div class="bar" style="--precent: 84"></div>
            </div>
          </div>
          <div class="dashcomponent-body-right" id="monthplan"></div>
        </div>
      </div>
      <!-- 年度计划完成情况 -->
      <div class="dashcomponent data-analysis-item">
        <div class="dashcomponent-title">
          <span class="dashcomponent-title-prefixIcon">
            <i class="iconfont icon-jihuabiao"></i>
          </span>
          <span class="dashcomponent-title-caption">年度计划完成情况 </span>
        </div>
        <div class="dashcomponent-body flex-col">
          <div class="dashcomponent-body-left dashcomponent-body">
            <div class="kpi-base analysis-info">
              <span class="kpi-space"></span>
              <div>
                <span class="kpi-value">3097.53</span>
                <span class="kpi-space"></span>
                <span class="kpi-title">万元</span>
              </div>
              <span class="kpi-space"></span>
              <span class="kpi-title">计划销售额</span>
              <span class="kpi-space"></span>
            </div>
            <div class="kpi-base analysis-info">
              <span class="kpi-space"></span>
              <div>
                <span class="kpi-value kpi-cursor" @click="handleYearType(0)">
                  1092.24
                </span>
                <span class="kpi-space"></span>
                <span class="kpi-title">万元</span>
              </div>
              <span class="kpi-space"></span>
              <span class="kpi-title">累计销售额</span>
              <span class="kpi-space"></span>
            </div>
            <div class="kpi-base analysis-process">
              <div class="bar" style="--precent: 70"></div>
            </div>
            <div class="kpi-base analysis-info">
              <span class="kpi-space"></span>
              <div>
                <span class="kpi-value">22.981</span>
                <span class="kpi-space"></span>
                <span class="kpi-title">件</span>
              </div>
              <span class="kpi-space"></span>
              <span class="kpi-title">计划销量</span>
              <span class="kpi-space"></span>
            </div>
            <div class="kpi-base analysis-info">
              <span class="kpi-space"></span>
              <div>
                <span class="kpi-value kpi-cursor" @click="handleYearType(1)">
                  19,681
                </span>
                <span class="kpi-space"></span>
                <span class="kpi-title">件</span>
              </div>
              <span class="kpi-space"></span>
              <span class="kpi-title">累计销量</span>
              <span class="kpi-space"></span>
            </div>
            <div class="kpi-base analysis-process">
              <div class="bar" style="--precent: 68"></div>
            </div>
          </div>
          <div class="dashcomponent-body-right" id="yearplan"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import * as echarts from "echarts";
import { ref, onMounted, reactive, onBeforeUnmount } from "vue";
// 查询的月份
let month = ref("2023-06");
// 月度计划完成表
let monthPlanChart = null;
// 年度计划完成表
let yearPlanChart = reactive({});
// 省份列表
const chinaProvince = ref([
  "北京市",
  "天津市",
  "上海市",
  "重庆市",
  "河北省",
  "山西省",
  "辽宁省",
  "吉林省",
  "黑龙江省",
  "江苏省",
  "浙江省",
  "安徽省",
  "福建省",
  "江西省",
  "山东省",
  "河南省",
  "湖北省",
  "湖南省",
  "广东省",
  "海南省",
  "四川省",
  "贵州省",
  "云南省",
  "陕西省",
  "甘肃省",
  "青海省",
  "台湾省",
  "内蒙古自治区",
  "广西壮族自治区",
  "西藏自治区",
  "宁夏回族自治区",
  "新疆维吾尔自治区",
  "香港特别行政区",
  "澳门特别行政区",
]);
// 年度月份列表
const yearMonth = ref([
  "1月",
  "2月",
  "3月",
  "4月",
  "5月",
  "6月",
  "7月",
  "8月",
  "9月",
  "10月",
  "11月",
  "12月",
]);
// 月度统计省份数据
const monthProvinceList = {
  xLine: [],
  salesPlan: [],
  salesAmount: [],
  completionRate: [],
};
// 年度计划完成统计数据
const yearPlanList = {
  xLine: [],
  salesAmount: [],
  completionRate: [],
  salesAmountSync: [],
  completionRateSync: [],
};
// 月度统计Y轴维度
let legendMonthList = reactive([
  {
    name: "销售金额",
    unit: "万元",
  },
  {
    name: "完成率",
    unit: "%",
  },
]);
// 年度统计Y轴维度
let legendYearList = reactive([
  {
    name: "销售金额",
    unit: "万元",
  },
  {
    name: "同期销售额",
    unit: "万元",
  },
  {
    name: "完成率",
    unit: "%",
  },
  {
    name: "同期完成率",
    unit: "%",
  },
]);

onMounted(() => {
  getMonthData();
  // drawYearPlan();
  getYearData();
  window.addEventListener("resize", chartsResize);
});
/** 获取月度统计省份数据  */
const getMonthData = () => {
  let result = {
    xLine: [],
    salesPlan: [],
    salesAmount: [],
    completionRate: [],
  };
  result.xLine = chinaProvince;
  let maxSalesPlan = legendMonthList[0].name == "销售金额" ? 80 : 2000;
  let maxSalesAmount = legendMonthList[0].name == "销售金额" ? 50 : 1800;
  let point = legendMonthList[0].name == "销售金额" ? 2 : 0;
  // 模拟省份的销售数据
  for (let i = 0; i < result.xLine.value.length; i++) {
    result.salesPlan.push(
      Number((Math.random() * maxSalesPlan).toFixed(point))
    );
    result.salesAmount.push(
      Number((Math.random() * maxSalesAmount).toFixed(point))
    );
    let rate = Number((result.salesAmount[i] / result.salesPlan[i]).toFixed(4));
    result.completionRate.push(
      rate > 1 ? Number(Math.random().toFixed(4)) : rate
    );
  }
  drawMonthPlan(result);
};
/** 获取年度计划完成统计数据 */
const getYearData = () => {
  let result = {
    xLine: [],
    salesAmount: [],
    completionRate: [],
    salesAmountSync: [],
    completionRateSync: [],
  };
  result.xLine = yearMonth.value;
  // 生成不同范围的随机数
  let max = legendYearList[0].name == "销售金额" ? 150 : 10000;
  let point = legendYearList[0].name == "销售金额" ? 2 : 0;
  // 模拟省份的销售数据
  for (let i = 0; i < result.xLine.length; i++) {
    result.salesAmount.push(Number((Math.random() * max).toFixed(point)));
    result.salesAmountSync.push(Number((Math.random() * max).toFixed(point)));
    // 0.5-1的随机小数
    result.completionRate.push(Number((Math.random() * 0.5 + 0.5).toFixed(4)));
    result.completionRateSync.push(
      Number((Math.random() * 0.5 + 0.5).toFixed(4))
    );
  }
  drawYearPlan(result);
};
/** 改变月度统计：销售额或者销量 */
const handleMonthType = (type) => {
  legendMonthList[0].name = type ? "销售数量" : "销售金额";
  legendMonthList[0].unit = type ? "件" : "万元";
  getMonthData();
};
/** 改变年度统计：销售额或者销售量 */
const handleYearType = (type) => {
  legendYearList[0].name = type ? "销售数量" : "销售金额";
  legendYearList[0].unit = type ? "件" : "万元";
  legendYearList[1].name = type ? "同期销量" : "同期销售额";
  legendYearList[1].unit = type ? "件" : "万元";
  getYearData();
};
/** 月度计划完成情况 */
const drawMonthPlan = (item) => {
  const { xLine, salesAmount, completionRate } = { ...item };
  monthPlanChart = echarts.getInstanceByDom(
    document.getElementById("monthplan")
  );
  if (
    monthPlanChart != null &&
    monthPlanChart != "" &&
    monthPlanChart != undefined
  ) {
    monthPlanChart.dispose();
  }
  monthPlanChart = echarts.init(document.getElementById("monthplan"));
  const option = {
    grid: {
      left: "3%",
      right: "3%",
      top: "10%",
      bottom: "3%",
      containLabel: true,
    },
    tooltip: {
      trigger: "axis",
    },

    legend: {
      data: legendMonthList.map((item) => item.name),
    },
    xAxis: [
      {
        type: "category",
        data: xLine.value,
        axisPointer: {
          type: "shadow",
        },
        axisLabel: {
          rotate: 60,

          formatter: function (value) {
            if (value.length > 3) {
              return value.substring(0, 2) + "...";
            } else {
              return value;
            }
          },
        },
      },
    ],
    yAxis: [
      {
        type: "value",
        name: legendMonthList[0].name + "/" + legendMonthList[0].unit,
        min: 0,
        splitNumber: 4,
        axisLabel: {
          formatter: "{value}",
        },
        // 分隔线
        splitLine: {
          show: false,
        },
        // 坐标轴轴线
        axisLine: {
          show: true,
        },
        // 坐标轴刻度
        axisTick: {
          show: false,
        },
      },
      {
        type: "value",
        name: legendMonthList[1].name,
        min: 0,
        max: 1,
        splitNumber: 5,
        axisLabel: {
          formatter: (value, index) => {
            return `${(value * 100).toFixed(0)}%`;
          },
        },
        // 分隔线
        splitLine: {
          show: false,
        },
        // 坐标轴轴线
        axisLine: {
          show: true,
        },
        // 坐标轴刻度
        axisTick: {
          show: false,
        },
      },
    ],
    series: [
      {
        name: legendMonthList[0].name,
        type: "bar",
        tooltip: {
          valueFormatter: function (value) {
            return value + legendMonthList[0].unit;
          },
        },
        data: salesAmount,
        itemStyle: {
          normal: {
            color: "#478FCF",
            lineStyle: {
              color: "#478FCF",
            },
          },
        },
      },
      {
        name: legendMonthList[1].name,
        type: "line",
        smooth: true,
        yAxisIndex: 1,
        tooltip: {
          valueFormatter: function (value) {
            return (value * 100).toFixed(2) + " %";
          },
        },
        data: completionRate,
        itemStyle: {
          normal: {
            color: "#34B19A",
            lineStyle: {
              color: "#34B19A",
            },
          },
        },
        markLine: {
          data: [
            {
              type: "average",
              name: "平均值",
              lineStyle: {
                color: "#F5A621",
                type: "solid",
              },
            },
          ],
        },
      },
    ],
  };

  option && monthPlanChart.setOption(option, true);
};
/** 年度计划完成情况 */
const drawYearPlan = (item) => {
  yearPlanChart = echarts.getInstanceByDom(document.getElementById("yearplan"));
  if (
    yearPlanChart != null &&
    yearPlanChart != "" &&
    yearPlanChart != undefined
  ) {
    yearPlanChart.dispose();
  }
  yearPlanChart = echarts.init(document.getElementById("yearplan"));

  const option = {
    grid: {
      left: "3%",
      right: "3%",
      top: "10%",
      bottom: "3%",
      containLabel: true,
    },
    tooltip: {
      trigger: "axis",
    },

    legend: {
      data: legendYearList.map((item) => item.name),
    },
    xAxis: [
      {
        type: "category",
        data: item.xLine,
        axisPointer: {
          type: "shadow",
        },
      },
    ],
    yAxis: [
      {
        type: "value",
        name: legendYearList[0].name + "/" + legendYearList[0].unit,
        min: 0,
        splitNumber: 5,
        axisLabel: {
          formatter: "{value}",
        },
        // 分隔线
        splitLine: {
          show: false,
        },
        // 坐标轴轴线
        axisLine: {
          show: true,
        },
        // 坐标轴刻度
        axisTick: {
          show: false,
        },
      },
      {
        type: "value",
        name: "完成率",
        min: 0,
        max: 1,
        splitNumber: 5,
        axisLabel: {
          formatter: (value, index) => {
            return `${(value * 100).toFixed(0)}%`;
          },
        },
        // 分隔线
        splitLine: {
          show: false,
        },
        // 坐标轴轴线
        axisLine: {
          show: true,
        },
        // 坐标轴刻度
        axisTick: {
          show: false,
        },
      },
    ],
    series: [
      {
        name: legendYearList[0].name,
        type: "bar",
        barWidth: "30%",
        tooltip: {
          valueFormatter: function (value) {
            return value + legendYearList[0].unit;
          },
        },
        data: item.salesAmount,
        itemStyle: {
          normal: {
            color: "#478FCF",
            lineStyle: {
              color: "#478FCF",
            },
          },
        },
      },
      {
        name: legendYearList[1].name,
        type: "bar",
        barWidth: "30%",
        tooltip: {
          valueFormatter: function (value) {
            return value + legendYearList[1].unit;
          },
        },
        data: item.salesAmountSync,
        itemStyle: {
          normal: {
            color: "#34B19A",
            lineStyle: {
              color: "#34B19A",
            },
          },
        },
      },
      {
        name: legendYearList[2].name,
        type: "line",
        smooth: false,
        yAxisIndex: 1,
        tooltip: {
          valueFormatter: function (value) {
            return (value * 100).toFixed(2) + " %";
          },
        },
        data: item.completionRate,
        itemStyle: {
          normal: {
            color: "#478FCF",
            lineStyle: {
              color: "#478FCF",
            },
          },
        },
      },
      {
        name: legendYearList[3].name,
        type: "line",
        smooth: false,
        yAxisIndex: 1,
        tooltip: {
          valueFormatter: function (value) {
            return (value * 100).toFixed(2) + " %";
          },
        },
        data: item.completionRateSync,
        itemStyle: {
          normal: {
            color: "#34B19A",
            lineStyle: {
              color: "#34B19A",
            },
          },
        },
      },
    ],
  };
  option && yearPlanChart.setOption(option);
};
/** 重绘 */
const chartsResize = () => {
  monthPlanChart && monthPlanChart.resize();
  yearPlanChart && yearPlanChart.resize();
};
onBeforeUnmount(() => {
  window.removeEventListener("resize", chartsResize);
});
</script>

<style  scoped lang='scss' >
.data-analysis {
  width: calc(100% - 2rem);
  height: calc(100% - 2rem);
  padding: 1rem;
  background: rgb(245, 246, 250);

  &-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
}
.timer {
  height: 30px;
}
.data-analysis-item {
  height: 49%;
  width: 100%;
  background-color: white;
}

.dashcomponent-body-left {
  width: 30%;
  height: 100%;
}
.dashcomponent-body-right {
  width: 70%;
  height: 100%;
}
.bar {
  height: 100%;
  max-height: 20px;
  width: 80%;
  background-color: #f5f5f5;
}
.bar::before {
  display: block;
  counter-reset: progress var(--precent);
  content: counter(progress) "%";
  width: calc(1% * var(--precent));
  height: 100%;
  color: #fff;
  background-color: rgb(71, 143, 207);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
}
.analysis-info {
  height: 35%;
  flex-direction: column-reverse;
  font-size: 1.9rem;
}
.analysis-process {
  width: 100%;
  height: 15%;
}
.kpi-cursor {
  color: rgb(71, 143, 207);
  cursor: pointer;
}
</style>
